<template>
  <component
    ref="formEl"
    :is="formRegister ? 'w-form-element' : 'div'"
    v-bind="formRegister && { validators, inputValue, disabled }"
    v-model:valid="valid"
    @reset="
      $emit('update:modelValue', (inputValue = null));
      $emit('input', null);
    "
    :column="!inline"
    :class="classes"
  >
    <w-radio
      v-for="(item, i) in radioItems"
      :key="i"
      :model-value="item.value === modelValue"
      @update:model-value="onInput(item)"
      @focus="$emit('focus', $event)"
      :name="inputName"
      :label="item.label"
      :label-on-left="labelOnLeft"
      :color="item.color"
      :disabled="disabled || null"
      :readonly="readonly || null"
      :class="{ mt1: !inline && i }"
    >
      <slot v-if="$slots.item" name="item" :item="item"></slot>
      <div v-else-if="item.label" v-html="item.label"></div>
    </w-radio>
  </component>
</template>

<script>
import { ref, computed, getCurrentInstance } from "vue";
export default {
  name: "w-radios",

  props: {
    items: { type: Array, required: true }, // All the possible options.
    modelValue: { type: [String, Number, Boolean] }, // v-model on selected option.
    labelOnLeft: { type: Boolean },
    itemLabelKey: { type: String, default: "label" },
    itemValueKey: { type: String, default: "value" },
    itemColorKey: { type: String, default: "color" }, // Support a different color per item.
    inline: { type: Boolean },
    color: { type: String, default: "primary" },
    // Also name, disabled, readonly, required and validators in the mixin.
    name: { type: String }, // When sending data through form.
    disabled: { type: Boolean },
    readonly: { type: Boolean },
    // required: { type: Boolean },
    validators: { type: Array }
  },

  emits: ["input", "update:modelValue", "focus"],

  provide() {
    // Disable w-form-el wrapping in each w-radio when inside a w-radios component that already does it.
    // Don't do a simple prop that can be turned on and off by user.
    return { wRadios: true };
  },
  inject: { formRegister: { default: null } },

  setup(props, ctx) {
    const inputValue = ref(null);
    const valid = ref(null);
    const instance = getCurrentInstance();
    const radioItems = computed(() => {
      return (props.items || []).map((item, i) => ({
        ...item,
        label: item[props.itemLabelKey],
        // If no value is set then add one to prevent error.
        value:
          item[props.itemValueKey] === undefined
            ? item[props.itemLabelKey] || i
            : item[props.itemValueKey],
        color: item[props.itemColorKey] || props.color
      }));
    });
    const classes = computed(() => {
      return ["w-radios", `w-radios--${props.inline ? "inline" : "column"}`];
    });

    const inputName = computed(() => {
      return (
        props.name || `${instance.type.name}--${instance.type.uid || instance.uid}`
      );
    });

    function onInput(item) {
      inputValue.value = true;
      ctx.emit("update:modelValue", item.value);
      ctx.emit("input", item.value);
    }
    return {
      inputValue,
      valid,
      radioItems,
      classes,
      onInput,
      inputName
    };
  }
};
</script>
